<template>
  <div :class="{
    'bottom-part': true,
    'bottom-part-dark': isDarkTheme,
    'bottom-part-light': !isDarkTheme,
  }">
    <CustomTitle
      :title="title"
      :pageConfig="pageConfig"
    >
      <template>
        <div class="text-box">
          <span>总体通过率：</span>
          <div>
            <span class="numBox">{{70.25}}</span>
            <span>%</span>
          </div>
        </div>
      </template>

    </CustomTitle>
    <div class="chart-box">
      <linebarChart 
        :isDarkTheme="isDarkTheme"
        @handleOpenRobotDealNum="handleOpenRobotDealNum"
      />
    </div>
  </div>
</template>

<script>
import CustomTitle from "../components/CustomTitle.vue";
import linebarChart from './linebarChart.vue'

export default {
  props: {
    pageConfig: Object
  },
  components: {
    CustomTitle,
    linebarChart
  },
  data() {
    return {
      title: '处理单量及通过率'
    }
  },

  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleOpenRobotDealNum(name) {
      this.$emit('handleOpenRobotDealNum', name);

    }
  }


}
</script>

<style lang="scss" scoped>
  .bottom-part {
    height: 35%;
    display: flex;
    flex-direction: column;
    .chart-box {
      height: calc(100% - 35px);
    }
  }
  .bottom-part-dark {
    .text-box {
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: baseline;
      padding: 0 20px 0 0;
      .numBox {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        font-family: "TCloudNumber";
        text-shadow: 0 0 8px #f5e74f80;
        letter-spacing: 0.8px;
        background: linear-gradient(180deg, #FFF 32.93%, #F5E74F 82.93%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  // 2K
  @media screen and (max-width: 2560px) {
    .bottom-part {
      .text-box {
        font-size: 20px;
        .numBox {
          font-size: 36px;
        }
      }
      .chart-box {
        height: calc(100% - 50px);
      }
    }
  }
  // 全高清屏幕
  @media screen and (max-width: 1920px) {
    .bottom-part {
      .text-box {
        font-size: 14px;
        .numBox {
          font-size: 18px;
        }
      }
      .chart-box {
        height: calc(100% - 35px);
      }
    }
  }

</style>